<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>导航</title>
        <style>
            ul{list-style:none;padding:0px;} /*清除内填充*/
            
            /*为清除浮动*/
            ul::after{
                content:'';
                display:block;
                clear:both;
            }
            ul li{
                width:120px;
                float:left;
                position:relative;
                text-align:center;
                margin:2px;
                border-radius:5px;
            }
            #nav a{ 
                border-radius:5px;
                display:block;
                background-color:deeppink;
                color:white;
                text-decoration:none;
            }
            #nav a:hover{ 
                background-color:green;
                color:red;
            }
            #nav .m1:hover>ul{display:block;postion:absolute;left:0px;}     
            #nav .m2:hover>ul{display:block;position:absolute;left:120px;top:0px;}           
            #nav ul{ display:none;}
        </style>
    </head>
    <body>
        <ul id='nav'>
            <li class='m1'><a href=''>首页</a></li>
            <li class='m1'><a href=''>商品展示</a></li>
            <li class='m1'><a href=''>服装</a>
                <ul>
                    <li class='m2'><a href=''>男装</a></li>
                        <li class='m2'><a href=''>女装</a>
                            <ul>
                                <li><a href=''>水手服</a></li>
                                <li><a href=''>护士服</a></li>
                                <li><a href=''>办公服</a></li>
                            </ul>
                        </li>
                    <li class='m2'><a href=''>童装</a></li>
                </ul>
            </li>
            <li class='m1'><a href=''>1元抢购</a></li>
        </ul>
    </body>
</html>